<template>
  <page>
    <template v-slot:header>
      <h2>
        <i class="el-icon-s-order"></i>
        <span>{{ $t("system.host_batch") }}</span>
      </h2>
    </template>
    <!--     <template v-slot:global-button>
      <el-button type="danger">{{ $t("system.delete_batch") }}</el-button>
    </template> -->
    <template v-slot:content>
      <el-card>
        <div slot="header" class="card-header">
          <span>{{ $t("system.batch_information") }}</span>
        </div>
        <div>
          <el-row>
            <el-col :span="4" class="ky-left">
              {{ $t("system.batch_name") }}:
            </el-col>
            <el-col :span="20" class="ky-right">
              {{ detail.name || "-" }}
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" class="ky-left">
              {{ $t("operate_user") }}:
            </el-col>
            <el-col :span="20" class="ky-right">
              {{ detail.userName || "-" }}
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" class="ky-left">
              {{ $t("last_update_time") }}:
            </el-col>
            <el-col :span="20" class="ky-right">
              {{ detail.updatedAt || "-" }}
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" class="ky-left">
              {{ $t("last_operation") }}:
            </el-col>
            <el-col :span="20" class="ky-right">
              {{ detail.lastOperation || "-" }}
            </el-col>
          </el-row>
        </div>
      </el-card>
      <ky-table
        ref="table"
        :search_data="search_data"
        :getData="getBatchHosts"
        :showSelect="showSelect"
        :search_criteria="search_criteria"
      >
        <template v-slot:table-action>
          <el-button
            class="kylin-item-button"
            :disabled="$refs.table && $refs.table.selectRow.ids.length == 0"
            @click="handleDowndload"
          >
            {{ $t("system.export_select") }}
          </el-button>
        </template>
        <template v-slot:table>
          <el-table-column :label="$t('system.ip_address')" prop="ip">
          </el-table-column>
          <el-table-column
            prop="operatingSystem"
            :label="$t('system.operating_system')"
          >
          </el-table-column>
          <el-table-column prop="version" :label="$t('system.version')">
          </el-table-column>
          <el-table-column
            prop="installTime"
            :label="$t('system.install_time')"
          >
          </el-table-column>
        </template>
      </ky-table>
    </template>
  </page>
</template>

<script>
import Page from "@/components/Page";
import kyTable from "@/components/KyTable";
import { getBatch, getBatchHosts, downloadBatchHost } from "@/api/batch";
import { download } from "@/utils";
export default {
  components: {
    Page,
    kyTable,
  },
  data() {
    return {
      detail: {},
      showSelect: true,
      search_criteria: {
        id: this.$route.params.id,
      },
      search_data: {
        ip: {
          name: "system.ip_address",
          type: "text",
        },
        operatingSystem: {
          name: "system.operating_system",
          type: "select",
          items: [
            {
              key: "中标麒麟高级服务器操作系统",
              name: "中标麒麟高级服务器操作系统",
            },
            {
              key: "银河麒麟高级服务器操作系统",
              name: "银河麒麟高级服务器操作系统",
            },
          ],
        },
        version: {
          name: "system.version",
          type: "select",
          items: [
            {
              key: "V7.0",
              name: "V7.0",
            },
            {
              key: "V10(SP1)",
              name: "V10(SP1)",
            },
            {
              key: "V10(SP2)",
              name: "V10(SP2)",
            },
          ],
        },
        installTime: {
          name: "system.install_time",
          type: "date",
        },
      },
    };
  },
  mounted() {
    getBatch({ id: this.$route.params.id }).then((res) => {
      this.detail = res.data.data;
    });
  },
  methods: {
    getBatchHosts,
    async getSelectAllIds() {
      let data = [];
      const res = await getBatchHosts({
        ...this.$route.query,
        paged: false,
        id: this.$route.params.id,
      });
      res.data.data.results.map((item) => {
        if (!this.$refs.table.selectRow.excludeIds.includes(item.id)) {
            data.push(item.id);
        }
      });
      return data;
    },
    async handleDowndload() {
      let ids = [];
      if (this.$refs.table.select_id == "2") {
        ids = await this.getSelectAllIds();
      } else {
        ids = this.$refs.table.selectRow.ids;
      }
      let res = await downloadBatchHost(ids);
      download(res, "batch_host");
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>